
section.wrapper {
    width: 1200px;
    height: 300px;
    border: 1px solid blue;
    margin: 25px auto;
    font-size: 0;
}

section.container {
    display: inline-block;
    vertical-align: top;
    width: 200px;
    height: 200px;
    margin: 50px 0 50px 80px;
    background: #dfdfdf;
    font-size: 1rem;
}

section .first {
    height: 198px;
    border: 1px solid blue;
    background: #ff0;
    transition: all 1500ms linear;
}

section .first:hover {
    transform: translate(20px, 10px);
    opacity: 0.5;
}

section .second {
    height: 198px;
    border: 1px solid blue;
    background: #ff0;
}

section .second:hover {
    transform: translateX(20px);
    opacity: 0.5;
}


section .third {
    height: 198px;
    border: 1px solid blue;
    background: #ff0;
}

section .third:hover {
    transform: translateY(20px);
    opacity: 0.5;
}

section .fourth {
    height: 198px;
    border: 1px solid blue;
    background: #ff0;
}

section .fourth:hover {
    transform: translate(0, 20px);
    opacity: 0.5;
}


/* ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ */

div.wrapper {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
    width: 1200px;
    height: 300px;
    border: 1px solid green;
    margin: 25px auto;
}

div.container {
    flex-basis: 200px;
    height: 200px;
    background: #dfdfdf;
}

div .container>div {
    height: 198px;
    border: 1px solid blue;
    background: rgba(255, 255, 0, 0.5);
    transition: all 1500ms linear;
}

div .first:hover {
    transform: rotate( 45deg );
}

div .second:hover {
    transform: rotateX( 45deg );
}

div .third:hover {
    transform: rotateY( 45deg );
}

div .fourth:hover {
    transform: rotateZ( 45deg );
}

